<!-- First repository information -->
<a
  href="{{ config.extra.first_repo_url }}"
  title="{{ config.extra.first_repo_name or 'First Repository' }}"
  class="md-source"
  data-md-component="source"
  style="margin-right: 10px;"
>
  <div class="md-source__icon md-icon">
    {% set first_icon = config.extra.first_repo_icon or "fontawesome/brands/github" %}
    {% include ".icons/" ~ first_icon ~ ".svg" %}
  </div>
  <div class="md-source__repository">
    {{ config.extra.first_repo_name or 'First Repository' }}
  </div>
</a>

<!-- Second repository information -->
<a
  href="{{ config.extra.second_repo_url }}"
  title="{{ config.extra.second_repo_name or 'Second Repository' }}"
  class="md-source"
  data-md-component="source"
  style="margin-right: 10px;"
>
  <div class="md-source__icon md-icon">
    {% set second_icon = config.extra.second_repo_icon or "fontawesome/brands/github" %}
    {% include ".icons/" ~ second_icon ~ ".svg" %}
  </div>
  <div class="md-source__repository">
    {{ config.extra.second_repo_name or 'Second Repository' }}
  </div>
</a>

<!-- Third repository information -->
<a
  href="{{ config.extra.third_repo_url }}"
  title="{{ config.extra.third_repo_name or 'Third Repository' }}"
  class="md-source"
  data-md-component="source"
>
  <div class="md-source__icon md-icon">
    {% set third_icon = config.extra.third_repo_icon or "fontawesome/brands/github" %}
    {% include ".icons/" ~ third_icon ~ ".svg" %}
  </div>
  <div class="md-source__repository">
    {{ config.extra.third_repo_name or 'Third Repository' }}
  </div>
</a>